<template>
	<view class="">
		<view class="Topbg">


		</view>

		<view class="move">
			<view class="mode">
				<view style="margin:0 auto 40rpx auto;width: 140rpx;">

					<u-image src="/static/huafeititle.png" width="140" height="60"></u-image>
				</view>
				<view class="u-flex u-row-between u-margin-top-80">
					<view class="u-flex">
						<u-image :src="imagesurl+'/images/my_2.png'" width="60" height="60"></u-image>
						<text class="moneny u-margin-left-20">{{moneny}}</text>
					</view>
				<!-- 	<view class="u-flex">
						<view class="btn red" @click="usephone">使用</view>
					
					</view> -->

				</view>
			</view>
			<u-tabs :list="nav" :is-scroll="false" :current="current" @change="change" active-color="#628DFF"
				inactive-color="#333" bg-color="{background:'transparent'}"></u-tabs>


			<view class="c_bg" v-for="(item,index) in list" :key="index">
				<view class="left" :class="current?'ed':''">
					<view>￥<text class="price">{{item.money}}</text></view>
					<view class="user" @click="use(item)" v-if="!current">
						使用
					</view>
					<view v-else style="margin-top:40rpx;color: #FF6450;">
						{{!item.status?'充值消耗':''}}
						{{item.status==1?'赠送消耗':''}}
					</view>
				</view>
				<view class="right">
					<view class="title">来源
						{{item.cate==1?'拼团':''}}
						{{item.cate==2?'赠送':''}}
					</view>
					<view class="des">
						仅限自己使用
					</view>
					<view class="detaill" v-if="item.cate==2">
						好友赠送的话费券不可再次赠送
					</view>

					<view class="detaill" style="display: flex;justify-content: space-between;" @click="aware(item)" v-if="item.status==3">
						<view>可以送给好友</view>
						<view style="color: #628DFF;" >
							送好友
							<u-icon name="arrow-right" color="#628DFF"></u-icon>
						</view>
					</view>

				</view>
			</view>





			<u-loadmore :status="status" />

		</view>






	</view>
</template>

<script>
		import url from '@/common/baseUrl.js';

	
	export default {

		data() {
			return {
				imagesurl: url.imageUrl,
				moneny: "200",
				status: 'loadmore',
				page: 1,
				nav: [{
					name: '可使用'
				}, {
					name: '已使用'
				}],
				current: 0,

				list: [],

			}
		},
	  onLoad() {

	  },
	  onShow() {
	     this.page=1;
	  	this.jiazai()
	  	this.information()
	  },
	  onReachBottom() {
	  	if (this.status == 'nomore') {
	  
	  	} else {
	  		this.jiazai()
	  	}
	  
	  },
		methods: {
		
			change(index) {
				this.current = index;
				this.page=1;
					this.jiazai()
			},
			use(item){
			
				uni.navigateTo({
					url:"../addPhone/use?money="+item.money +"&id="+item.id
				})
			},
			aware(item){
				uni.navigateTo({
					url:"../addPhone/aware?id="+item.id
				})
			},
			jiazai(){
				this.$u.post('/api/user/telCharge', {
				   status:this.current==0?'2,3':'0,1',
				   page:this.page,
				}, {}).then(res => {
				   var resList = res.data.data
				   if (this.page == 1) {
				   	this.list = []
				   }
				   if (resList.length > 9) {
				   	this.status = 'loadmore'
				   	this.page = this.page + 1
				   } else {
				   	this.status = 'nomore'
				   }
				   this.list = this.list.concat(resList)
				   this.loading = false
				   
										 
				}).catch(err => {})
			},
			information(){
				this.$u.post('/api/user/information', {
					
				}, {}).then(res => {
					
					this.moneny=res.data.telchargeNum
				}).catch(err => {})
			}
			
		}
	}
</script>

<style lang="scss">
	@import 'common.css';

	page {
		background: #f1f1f1;
	}

	.c_bg {
		display: flex;
		margin: 20rpx auto;
		width: 690rpx;

		.left {
			background-image: url(../../static/42d5fae86e8e3d91352211ee70e88bf.png);
			width: 250rpx;
			height: 250rpx;
			background-size: cover;
			text-align: center;
			color: #FFFFFF;
			padding-top: 40rpx;

			.price {
				font-size: 40rpx;
				color: #FFFFFF;

			}

			.user {
				width: 100rpx;
				height: 48rpx;

				background: #FFFFFF;
				border-radius: 50rpx;
				text-align: center;
				line-height: 48rpx;
				color: #FF6450;
				margin: 30rpx auto;
				font-size: 24rpx;
			}
		}

		.right {
			background-image: url(../../static/6fdfd46bdd489f7360849e3a5a8f155.png);
			width: 460rpx;
			height: 250rpx;
			background-size: cover;
			padding: 40rpx;


			.title {
				font-size: 48rpx;
				color: #FF6450;
				margin-bottom: 30rpx;

			}

			.des {
				font-size: 24rpx;
				color: #333;
			}

			.detaill {
				font-size: 24rpx;
				color: #333;
			}
		}


	}


	.ed {
		background-image: url(../../static/ebb8a556669fd51919c1a90d0bb1c87.png) !important;
	}
</style>
